<template>
  <div class="student-manage">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <span class="title">学生管理</span>
          <div class="header-actions">
            <el-button type="primary" @click="showAddDialog">
              <el-icon><Plus /></el-icon>
              新增学生
            </el-button>
            <el-button type="success" @click="showImportDialog">
              <el-icon><Upload /></el-icon>
              批量导入
            </el-button>
            <el-button
              type="warning"
              @click="showBatchDialog"
              :disabled="selectedStudents.length === 0"
            >
              <el-icon><Operation /></el-icon>
              批量操作 ({{ selectedStudents.length }})
            </el-button>
          </div>
        </div>
      </template>
      
      <!-- 搜索筛选区域 -->
      <div class="search-section">
        <el-row :gutter="16" class="search-row">
          <el-col :span="5">
            <el-input
              v-model="searchForm.search"
              placeholder="搜索学号/姓名/手机号/邮箱"
              clearable
              @keyup.enter="handleSearch"
              @clear="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-col>
          <el-col :span="3">
            <el-select v-model="searchForm.grade_id" placeholder="选择年级" clearable @change="handleSearch">
              <el-option
                v-for="grade in gradeList"
                :key="grade.id"
                :label="grade.name"
                :value="grade.id"
              />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="searchForm.gender" placeholder="性别" clearable @change="handleSearch">
              <el-option label="男" value="M" />
              <el-option label="女" value="F" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="searchForm.status" placeholder="学籍状态" clearable @change="handleSearch">
              <el-option label="在校" value="active" />
              <el-option label="已毕业" value="graduated" />
              <el-option label="休学" value="suspended" />
              <el-option label="退学" value="dropped" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="searchForm.employment_status" placeholder="就业状态" clearable @change="handleSearch">
              <el-option label="未就业" value="unemployed" />
              <el-option label="已就业" value="employed" />
              <el-option label="自主创业" value="self_employed" />
              <el-option label="继续深造" value="further_study" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="searchForm.resume_status" placeholder="简历状态" clearable @change="handleSearch">
              <el-option label="未开始" value="not_started" />
              <el-option label="制作中" value="in_progress" />
              <el-option label="已提交" value="submitted" />
              <el-option label="已通过" value="approved" />
              <el-option label="需修改" value="rejected" />
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button 
              type="warning" 
              @click="showBatchDialog"
              :disabled="selectedStudents.length === 0"
            >
              批量操作({{ selectedStudents.length }})
            </el-button>
          </el-col>
        </el-row>
      </div>
      
      <!-- 学生表格 -->
      <el-table
        v-loading="loading"
        :data="studentList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="student_id" label="学号" width="120" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column label="性别" width="60">
          <template #default="{ row }">
            {{ row.gender === 'M' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column label="所属年级" width="120">
          <template #default="{ row }">
            {{ row.grade_info?.name || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="email" label="邮箱" width="160" />
        <el-table-column label="指导老师" width="120">
          <template #default="{ row }">
            {{ row.advisor_info?.full_name || row.advisor_info?.username || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="学籍状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="就业状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getEmploymentTagType(row.employment_status)">
              {{ getEmploymentText(row.employment_status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="简历状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getResumeTagType(row.resume_status)">
              {{ getResumeText(row.resume_status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="showEditDialog(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 新增/编辑学生对话框 -->
    <el-dialog
      v-model="studentDialogVisible"
      :title="isEdit ? '编辑学生' : '新增学生'"
      width="900px"
      @close="resetStudentForm"
    >
      <el-form
        ref="studentFormRef"
        :model="studentForm"
        :rules="studentRules"
        label-width="120px"
        class="student-form"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <h4 class="section-title">基本信息</h4>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="学号" prop="student_id">
                <el-input
                  v-model="studentForm.student_id"
                  :disabled="isEdit"
                  placeholder="请输入学号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input
                  v-model="studentForm.name"
                  placeholder="请输入姓名"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="studentForm.gender">
                  <el-radio label="M">男</el-radio>
                  <el-radio label="F">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属年级" prop="grade">
                <el-select
                  v-model="studentForm.grade"
                  placeholder="请选择年级"
                  style="width: 100%"
                >
                  <el-option
                    v-for="grade in gradeList"
                    :key="grade.id"
                    :label="grade.name"
                    :value="grade.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="指导老师" prop="advisor">
                <el-select
                  v-model="studentForm.advisor"
                  placeholder="请选择指导老师"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="teacher in teacherList"
                    :key="teacher.id"
                    :label="teacher.full_name || teacher.username"
                    :value="teacher.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 联系方式 -->
        <div class="form-section">
          <h4 class="section-title">联系方式</h4>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号" prop="phone">
                <el-input
                  v-model="studentForm.phone"
                  placeholder="请输入手机号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model="studentForm.email"
                  placeholder="请输入邮箱地址"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <!-- 状态信息 -->
        <div class="form-section">
          <h4 class="section-title">状态信息</h4>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="学籍状态" prop="status">
                <el-select
                  v-model="studentForm.status"
                  placeholder="请选择学籍状态"
                  style="width: 100%"
                >
                  <el-option label="在校" value="active" />
                  <el-option label="已毕业" value="graduated" />
                  <el-option label="休学" value="suspended" />
                  <el-option label="退学" value="dropped" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="就业状态" prop="employment_status">
                <el-select
                  v-model="studentForm.employment_status"
                  placeholder="请选择就业状态"
                  style="width: 100%"
                >
                  <el-option label="未就业" value="unemployed" />
                  <el-option label="已就业" value="employed" />
                  <el-option label="自主创业" value="self_employed" />
                  <el-option label="继续深造" value="further_study" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="简历状态" prop="resume_status">
                <el-select
                  v-model="studentForm.resume_status"
                  placeholder="请选择简历状态"
                  style="width: 100%"
                >
                  <el-option label="未开始" value="not_started" />
                  <el-option label="制作中" value="in_progress" />
                  <el-option label="已提交" value="submitted" />
                  <el-option label="已通过" value="approved" />
                  <el-option label="需修改" value="rejected" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>


      </el-form>
      
      <template #footer>
        <el-button @click="studentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          {{ isEdit ? '更新' : '创建' }}
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 批量导入对话框 -->
    <el-dialog v-model="importDialogVisible" title="批量导入学生" width="700px">
      <div class="import-content">
        <div class="import-tips">
          <h4>导入说明：</h4>
          <ul>
            <li>请先下载导入模板，按照模板格式填写学生信息</li>
            <li>支持 Excel (.xlsx, .xls) 和 CSV (.csv) 格式</li>
            <li>文件大小不超过 10MB</li>
            <li>必填字段：学号、姓名、性别、年级ID</li>
          </ul>
        </div>

        <div class="import-actions">
          <el-button type="success" @click="downloadTemplate">
            <el-icon><download /></el-icon>
            下载导入模板
          </el-button>
        </div>

        <el-divider />

        <el-upload
          ref="uploadRef"
          :auto-upload="false"
          :on-change="handleFileChange"
          :before-remove="handleFileRemove"
          accept=".xlsx,.xls,.csv"
          drag
          class="upload-demo"
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              只能上传 xlsx/xls/csv 文件，且不超过 10MB
            </div>
          </template>
        </el-upload>
      </div>

      <template #footer>
        <el-button @click="importDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleImport" :loading="importing" :disabled="!uploadFile">
          开始导入
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 批量操作对话框 -->
    <el-dialog v-model="batchDialogVisible" title="批量操作" width="500px">
      <el-form :model="batchForm" label-width="100px">
        <el-form-item label="操作类型">
          <el-radio-group v-model="batchForm.operation">
            <el-radio label="change_status">修改学籍状态</el-radio>
            <el-radio label="change_employment">修改就业状态</el-radio>
            <el-radio label="change_resume">修改简历状态</el-radio>
            <el-radio label="delete">删除学生</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="学籍状态" v-if="batchForm.operation === 'change_status'">
          <el-select v-model="batchForm.status" placeholder="选择学籍状态">
            <el-option label="在校" value="active" />
            <el-option label="已毕业" value="graduated" />
            <el-option label="休学" value="suspended" />
            <el-option label="退学" value="dropped" />
          </el-select>
        </el-form-item>

        <el-form-item label="就业状态" v-if="batchForm.operation === 'change_employment'">
          <el-select v-model="batchForm.employment_status" placeholder="选择就业状态">
            <el-option label="未就业" value="unemployed" />
            <el-option label="已就业" value="employed" />
            <el-option label="自主创业" value="self_employed" />
            <el-option label="继续深造" value="further_study" />
          </el-select>
        </el-form-item>

        <el-form-item label="简历状态" v-if="batchForm.operation === 'change_resume'">
          <el-select v-model="batchForm.resume_status" placeholder="选择简历状态">
            <el-option label="未开始" value="not_started" />
            <el-option label="制作中" value="in_progress" />
            <el-option label="已提交" value="submitted" />
            <el-option label="已通过" value="approved" />
            <el-option label="需修改" value="rejected" />
          </el-select>
        </el-form-item>
        
        <div v-if="batchForm.operation === 'delete'" class="warning-text">
          <el-icon><Warning /></el-icon>
          确定要删除选中的 {{ selectedStudents.length }} 名学生吗？此操作不可恢复！
        </div>
      </el-form>
      
      <template #footer>
        <el-button @click="batchDialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleBatchOperation" 
          :loading="batchProcessing"
        >
          确认操作
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Upload, Download, Search, Refresh, Operation,
  UploadFilled, Warning
} from '@element-plus/icons-vue'
import { studentApi, gradeApi, teacherApi } from '@/api/students'


// 响应式数据
const loading = ref(false)
const studentList = ref<any[]>([])
const selectedStudents = ref<any[]>([])
const gradeList = ref<any[]>([])
const teacherList = ref<any[]>([])

// 搜索表单 - 支持所有核心字段的筛选
const searchForm = reactive({
  search: '',           // 关键词搜索：学号/姓名/手机号/邮箱
  grade_id: '',         // 年级筛选
  gender: '',           // 性别筛选
  status: '',           // 学籍状态筛选
  employment_status: '', // 就业状态筛选
  resume_status: ''     // 简历状态筛选
})

// 分页
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 学生表单
const studentDialogVisible = ref(false)
const isEdit = ref(false)
const submitting = ref(false)
const studentFormRef = ref()

const studentForm = reactive({
  id: null,
  student_id: '',
  name: '',
  gender: 'M',
  phone: '',
  email: '',
  grade: '',
  advisor: '',
  status: 'active',
  employment_status: 'unemployed',
  resume_status: 'not_started'
})

// 学生表单验证规则 - 覆盖所有核心字段
const studentRules = {
  student_id: [
    { required: true, message: '请输入学号', trigger: 'blur' },
    { min: 3, max: 20, message: '学号长度应在3-20个字符之间', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度应在2-10个字符之间', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  grade: [
    { required: true, message: '请选择年级', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择学籍状态', trigger: 'change' }
  ],
  employment_status: [
    { required: true, message: '请选择就业状态', trigger: 'change' }
  ],
  resume_status: [
    { required: true, message: '请选择简历状态', trigger: 'change' }
  ]
}

// 导入对话框
const importDialogVisible = ref(false)
const importing = ref(false)
const uploadRef = ref()
const uploadFile = ref(null)

// 批量操作对话框
const batchDialogVisible = ref(false)
const batchProcessing = ref(false)
const batchForm = reactive({
  operation: 'change_status',
  status: '',
  employment_status: '',
  resume_status: ''
})

// 方法
const fetchStudentList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      page_size: pagination.pageSize,
      ...searchForm
    }

    const response = await studentApi.getStudentList(params)
    studentList.value = response.data?.results || []
    pagination.total = response.data?.count || 0
  } catch (error) {
    ElMessage.error('获取学生列表失败')
  } finally {
    loading.value = false
  }
}

const fetchGradeList = async () => {
  try {
    const response = await gradeApi.getGradeList({ page_size: 1000 })
    gradeList.value = response.data?.results || []
  } catch (error) {
    console.error('获取年级列表失败:', error)
  }
}

const fetchTeacherList = async () => {
  try {
    const response = await teacherApi.getTeacherList()
    teacherList.value = response.data || []
  } catch (error) {
    console.error('获取老师列表失败:', error)
  }
}

const handleSearch = () => {
  pagination.page = 1
  fetchStudentList()
}

const handleReset = () => {
  Object.keys(searchForm).forEach(key => {
    (searchForm as any)[key] = ''
  })
  handleSearch()
}

const handleSelectionChange = (selection: any[]) => {
  selectedStudents.value = selection
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  fetchStudentList()
}

const handleCurrentChange = (page: number) => {
  pagination.page = page
  fetchStudentList()
}

const showAddDialog = () => {
  isEdit.value = false
  studentDialogVisible.value = true
  resetStudentForm()
}

const showEditDialog = (row: any) => {
  isEdit.value = true
  studentDialogVisible.value = true

  // 填充表单数据
  Object.keys(studentForm).forEach(key => {
    if (key === 'grade') {
      (studentForm as any)[key] = row.grade_info?.id || ''
    } else if (key === 'advisor') {
      (studentForm as any)[key] = row.advisor_info?.id || ''
    } else {
      (studentForm as any)[key] = row[key] || ''
    }
  })
}

const resetStudentForm = () => {
  Object.keys(studentForm).forEach(key => {
    if (key === 'id') {
      (studentForm as any)[key] = null
    } else if (key === 'gender') {
      (studentForm as any)[key] = 'M'
    } else if (key === 'status') {
      (studentForm as any)[key] = 'active'
    } else if (key === 'employment_status') {
      (studentForm as any)[key] = 'unemployed'
    } else if (key === 'resume_status') {
      (studentForm as any)[key] = 'not_started'
    } else {
      (studentForm as any)[key] = ''
    }
  })
  studentFormRef.value?.clearValidate()
}

const handleSubmit = async () => {
  try {
    await studentFormRef.value.validate()
    submitting.value = true

    if (isEdit.value && studentForm.id) {
      await studentApi.updateStudent(studentForm.id, studentForm)
      ElMessage.success('学生信息更新成功')
    } else {
      await studentApi.createStudent(studentForm)
      ElMessage.success('学生创建成功')
    }

    studentDialogVisible.value = false
    fetchStudentList()
  } catch (error) {
    ElMessage.error(isEdit.value ? '更新失败' : '创建失败')
  } finally {
    submitting.value = false
  }
}



const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除学生 ${row.name}(${row.student_id}) 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await studentApi.deleteStudent(row.id)
    ElMessage.success('删除成功')
    fetchStudentList()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

const showImportDialog = () => {
  importDialogVisible.value = true
}

const showBatchDialog = () => {
  if (selectedStudents.value.length === 0) {
    ElMessage.warning('请先选择要操作的学生')
    return
  }
  batchDialogVisible.value = true
}

const handleFileChange = (file: any) => {
  uploadFile.value = file.raw
}

const handleFileRemove = () => {
  uploadFile.value = null
  return true
}

const downloadTemplate = () => {
  // 创建CSV模板内容
  const headers = ['学号', '姓名', '性别', '手机号', '邮箱', '年级ID', '学籍状态', '就业状态', '简历状态']
  const sampleData = [
    ['ST2024001', '张三', 'M', '13800138000', 'zhangsan@example.com', '1', 'active', 'unemployed', 'not_started'],
    ['ST2024002', '李四', 'F', '13800138001', 'lisi@example.com', '1', 'active', 'unemployed', 'not_started']
  ]

  // 创建CSV内容
  const csvContent = [headers, ...sampleData]
    .map(row => row.map(field => `"${field}"`).join(','))
    .join('\n')

  // 添加BOM以支持中文
  const BOM = '\uFEFF'
  const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })

  // 创建下载链接
  const link = document.createElement('a')
  const url = URL.createObjectURL(blob)
  link.setAttribute('href', url)
  link.setAttribute('download', '学生导入模板.csv')
  link.style.visibility = 'hidden'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)

  ElMessage.success('模板下载成功')
}

const handleImport = async () => {
  if (!uploadFile.value) {
    ElMessage.warning('请选择要导入的文件')
    return
  }

  importing.value = true
  try {
    const formData = new FormData()
    formData.append('file', uploadFile.value)

    const response = await studentApi.importStudents(formData)
    ElMessage.success(response.data?.message || '导入成功')

    importDialogVisible.value = false
    fetchStudentList()
  } catch (error) {
    ElMessage.error('导入失败')
  } finally {
    importing.value = false
  }
}

const handleBatchOperation = async () => {
  batchProcessing.value = true
  try {
    const data = {
      student_ids: selectedStudents.value.map(s => s.id),
      operation: batchForm.operation,
      status: batchForm.status,
      employment_status: batchForm.employment_status,
      resume_status: batchForm.resume_status
    }

    const response = await studentApi.batchOperation(data)
    ElMessage.success(response.data?.message || '操作成功')

    batchDialogVisible.value = false
    selectedStudents.value = []
    fetchStudentList()
  } catch (error) {
    ElMessage.error('批量操作失败')
  } finally {
    batchProcessing.value = false
  }
}



// 辅助方法
const getStatusTagType = (status: string) => {
  const typeMap = {
    'active': 'success',
    'graduated': 'info',
    'suspended': 'warning',
    'dropped': 'danger'
  }
  return (typeMap as any)[status] || 'info'
}

const getStatusText = (status: string) => {
  const textMap = {
    'active': '在校',
    'graduated': '已毕业',
    'suspended': '休学',
    'dropped': '退学'
  }
  return (textMap as any)[status] || status
}

const getEmploymentTagType = (status: string) => {
  const typeMap = {
    'unemployed': 'info',
    'employed': 'success',
    'self_employed': 'warning',
    'further_study': 'primary'
  }
  return (typeMap as any)[status] || 'info'
}

const getEmploymentText = (status: string) => {
  const textMap = {
    'unemployed': '未就业',
    'employed': '已就业',
    'self_employed': '自主创业',
    'further_study': '继续深造'
  }
  return (textMap as any)[status] || status
}

const getResumeTagType = (status: string) => {
  const typeMap = {
    'not_started': 'info',
    'in_progress': 'warning',
    'submitted': 'primary',
    'approved': 'success',
    'rejected': 'danger'
  }
  return (typeMap as any)[status] || 'info'
}

const getResumeText = (status: string) => {
  const textMap = {
    'not_started': '未开始',
    'in_progress': '制作中',
    'submitted': '已提交',
    'approved': '已通过',
    'rejected': '需修改'
  }
  return (textMap as any)[status] || status
}

// 生命周期
onMounted(() => {
  fetchStudentList()
  fetchGradeList()
  fetchTeacherList()
})
</script>

<style scoped>
.import-content {
  padding: 20px 0;
}

.import-tips {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.import-tips h4 {
  margin: 0 0 10px 0;
  color: #409eff;
  font-size: 14px;
}

.import-tips ul {
  margin: 0;
  padding-left: 20px;
}

.import-tips li {
  margin-bottom: 5px;
  color: #606266;
  font-size: 13px;
}

.import-actions {
  text-align: center;
  margin-bottom: 20px;
}

.upload-demo {
  margin-top: 20px;
}

/* 学生管理页面样式 */
.student-manage {
  padding: 20px;
}

.page-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 搜索区域样式 */
.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.search-row {
  align-items: center;
}

.search-actions {
  display: flex;
  gap: 12px;
}

/* 学生表单样式 */
.student-form {
  padding: 20px 0;
}

.form-section {
  margin-bottom: 30px;
}

.section-title {
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #409eff;
  border-bottom: 2px solid #e4e7ed;
}

.section-title:first-child {
  margin-top: 0;
}

/* 批量操作警告文本 */
.warning-text {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
  color: #f56c6c;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .student-manage {
    padding: 10px;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
  }

  .search-section {
    padding: 15px;
  }

  .search-actions {
    margin-top: 15px;
    justify-content: center;
  }
}
</style>

<style scoped>
.student-manage {
  padding: 20px;
}

.page-card {
  min-height: calc(100vh - 120px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.header-actions {
  display: flex;
  gap: 12px;
}

.search-bar {
  margin-bottom: 20px;
  padding: 20px;
  background: var(--el-bg-color-page);
  border-radius: 8px;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.warning-text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--el-color-warning);
  font-size: 14px;
}

:deep(.el-table) {
  .el-table__header {
    background-color: var(--el-bg-color-page);
  }

  .el-table__row:hover {
    background-color: var(--el-fill-color-light);
  }
}

:deep(.el-dialog) {
  .el-dialog__header {
    border-bottom: 1px solid var(--el-border-color-light);
    padding-bottom: 15px;
  }

  .el-dialog__body {
    padding-top: 20px;
  }
}

:deep(.el-upload-dragger) {
  border: 2px dashed var(--el-border-color);
  border-radius: 8px;

  &:hover {
    border-color: var(--el-color-primary);
  }
}

.el-tag {
  font-size: 12px;
}

.el-button + .el-button {
  margin-left: 8px;
}

@media (max-width: 768px) {
  .student-manage {
    padding: 10px;
  }

  .search-bar {
    padding: 15px;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
}
</style>
